<template>
    <el-affix :offset="16" style="height: 74px; width: 100%">
        <div class="btn-container">
            <!-- <el-button type="primary" @click="() => (drawer = true)">
                查看 JSON
            </el-button> -->
            <!-- <el-button type="primary" @click="saveAsPng"> 保存图片 </el-button> -->
            <div class="slider">
                <el-button
                    type="primary"
                    style="margin-right: 16px; width: 32px"
                    @click="zoom -= 0.1"
                >
                    <el-icon>
                        <Minus />
                    </el-icon>
                </el-button>
                <el-slider
                    v-model="zoom"
                    :marks="marks"
                    :min="0.1"
                    :max="5"
                    :step="0.1"
                    height="200px"
                />
                <el-button
                    type="primary"
                    style="margin-left: 16px; width: 32px"
                    @click="zoom += 0.1"
                >
                    <el-icon>
                        <Plus />
                    </el-icon>
                </el-button>
            </div>
            <el-button type="success" @click="saveAsPng"> 发布 </el-button>
        </div>
    </el-affix>
    <div
        class="affix-container"
        :style="`transform: scale(${zoom})`"
        style="transform-origin: 0 0"
    >
        <sc-workflow
            class="workflow"
            ref="workflowRef"
            id="content-to-capture"
            v-model="data.nodeConfig"
        />
        <!-- <el-drawer
            v-model="drawer"
            size="500px"
            class="drawer"
            :append-to-body="true"
            :modal="false"
            :with-header="false"
        >
            <div style="height: 100vh">
                <div class="drawerJsonTree">
                    <el-button type="primary" plain @click="copyParseJson">
                        复制格式化后的 JSON
                    </el-button>
                    <el-button type="primary" plain @click="copyJson">
                        复制压缩后的 JSON
                    </el-button>
                    <el-button type="primary" plain @click="drawer = false">
                        关闭弹窗
                    </el-button>
                </div>
                <json-editor
                    v-model="data"
                    class="editor"
                    language="zh-CN"
                    current-mode="view"
                />
            </div>
        </el-drawer> -->
    </div>
</template>
<script setup>
import { ref, reactive, onMounted } from 'vue'
// import html2canvas from 'html2canvas'
import useClipboard from 'vue-clipboard3'
import scWorkflow from '@/components/scWorkflow/index.vue'
import JsonEditor from 'json-editor-vue'
import { addPrcessList, getProcessKey } from '../api/index'
import { useRouter } from 'vue-router'
const router = useRouter()
const zoom = ref(1)
const processKey = ref('')
const marks = reactive({
    0.1: 'min',
    1: '1',
    2: '2',
    3: '3',
    4: '4',
    5: 'max'
})

const drawer = ref(false)
const data = ref({
    id: 1,
    name: '请假审批',
    key: '',
    nodeConfig: {
        nodeName: '发起人',
        nodeKey: 'flk0001',
        type: 0,
        nodeAssigneeList: []
    }
})

const { toClipboard } = useClipboard()

const copyParseJson = async () => {
    await toClipboard(JSON.stringify(data.value, null, '  '))
}

const copyJson = async () => {
    await toClipboard(JSON.stringify(data.value))
}

const handleWeel = (e) => {
    e.preventDefault()
    if (e.wheelDelta < 0) {
        zoom.value -= 0.1
    } else {
        zoom.value += 0.1
    }

    if (zoom.value <= 0.1) {
        zoom.value = 0.1
    } else if (zoom.value >= 5) {
        zoom.value = 5
    }
}

// 保存图片
// const saveAsPng = async () => {
//     const element = document.getElementById('content-to-capture')
//     element.parentElement.style.transform = 'scale(1)'
//     const canvas = await html2canvas(element, {
//         backgroundColor: '#efefef'
//     })
//     const image = canvas
//         .toDataURL('image/png')
//         .replace('image/png', 'image/octet-stream')
//     let link = document.createElement('a')
//     link.download = `flowlong-${Date.now()}.png`
//     link.href = image
//     link.click()
// }
// 初始化页面
const init = async () => {
    const res = await getProcessKey()
    console.log(res)
    processKey.value = res
}
// 发布流程
const saveAsPng = async () => {
    data.value.key = processKey.value // 给 key 赋新值
    console.log(JSON.stringify(data.value, null, '  '))
    const params = JSON.stringify(data.value, null, '  ')
    const res = await addPrcessList(params)
    console.log(res)
    router.push({ path: '/setting/process-list' }) // 路由跳转
}

onMounted(() => {
    document.getElementById('app').onwheel = (e) => handleWeel(e)
    init()
})
</script>

<style lang="less">
:root {
    --el-drawer-padding-primary: 0;
}

body {
    margin: 0;
    background-color: #efefef;
}

.affix-container {
    display: flex;
    justify-content: center;
    flex-direction: row-reverse;
}

.editor {
    width: 100%;
    height: calc(100vh - 75px);
}

.editor .jsoneditor-poweredBy,
.editor .jsoneditor-transform,
.editor .jsoneditor-repair,
.editor .full-screen {
    display: none !important;
}

.workflow {
    padding: 10px;
}

.jsoneditor-menu > button.jsoneditor-copy {
    background-position: -48px 0px;
}

.el-drawer__body {
    padding: 15px;
    padding-top: 0;
    overflow: visible;
}

.btn-container {
    display: flex;
    height: 42px;
    margin-left: 16px;
}

.slider {
    width: 300px;
    display: flex;
    margin: 0 20px;
}

.drawerJsonTree {
    width: 100%;
    height: 60px;
    padding: 15px 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    .el-button {
        flex: 1;
    }
}
</style>
